import { FC, useEffect } from "react"
import styles from "LineChart.less"
import { Select } from "antd"
import { number } from "echarts"
const { Option } = Select

const Echarts = require("echarts/lib/echarts")
// 引入柱状图等
require("echarts/lib/chart/line")
// 引入提示框和标题组件
require("echarts/lib/component/tooltip")
require("echarts/lib/component/title")
// require('echarts/lib/component/dataZoom')
require("echarts/lib/component/markPoint")
require("echarts/lib/component/markLine")

import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from "echarts/components"

Echarts.use(
  [TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent]
)

const lineChart: FC = () => {

  const initChart = () => {
    const chart = Echarts.init(document.getElementById("chartId"))
    const option = {
      title: {
        text: "单位：mmol",
        textStyle: {
          fontSize: 12,
          color: "#000"
        },
        padding: 0,
        left: 10
      },
      grid: {
        left: 30,
        top: 45
      },
      xAxis: {
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        axisLabel: {
          fontSize: 12,
          color: "#333"
        },
        axisLine: {
          show: false
        },
        axisTick: {
          alignWithLabel: true,
          lineStyle: {
            color: "#BDC8D3"
          }
        }
      },
      yAxis: {
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          fontSize: 12,
          color: "#333"
        },
        splitLine: {
          lineStyle: {
            color: ["rgba(65, 97, 128, 0.2)"],
            type: "dashed"
          }
        }
      },
      series: [{
        name: "趋势",
        type: "line",
        data: [120, 132, 101, 134, 90, 230, 210],
        // data: [5, 20, {
        //   value: 36,
        //   itemStyle: {
        //     color: '#D75050'
        //   }
        // }, 10, 10, 20],
        symbol: "circle",
        symbolSize: 10,
        itemStyle: {
          color: "#5B8FF9",
          borderColor: "#fff",
          borderWidth: 2
        },
        lineStyle: {
          color: "#5B8FF9"
        },
        markLine: {
          symbol: "none",
          silent: true,
          lineStyle: {
            color: "#2AC592",
            type: "dashed"
          },
          data: [{
            yAxis: 12,
            label: {
              formatter: "参考值：10"
            }
          }, {
            yAxis: 50,
            label: {
              formatter: "参考值：20"
            }
          }],
          label: {
            position: "insideEndBottom"
          }
        }
      }],
      tooltip: {
        backgroundColor: "#fff",
        textStyle: {
          fontSize: 12,
          color: "#666"
        },
        extraCssText: "border: 1px solid #979797;border-radius: 4px;",
        formatter: (params: any) => {
          return `<div>时间：${params.name}</div><div>结果：${params.value} mmol</div>`
        },
        position: (point: any, params: any, dom: any, rect: any, size: number) => {
          return [point[0] - 45, point[1] - 65]
        }
      }
    }
    chart.setOption(option)

  }


  useEffect(() => {
    initChart()
  }, [])
  return (
    <div >
      <Select style={{ width: 220, marginBottom: 15 }} placeholder="请选择参与报告趋势图">
        <Option value="jack">Jack</Option>
        <Option value="lucy">Lucy</Option>
        <Option value="sd">asdas</Option>
      </Select>
      <div id="chartId" style={{ height: "300px" }} />
    </div>
  )
}

export default lineChart